@charset "utf-8";
@import "reset";
$zcm:40;
@function r($px) {
    @return $px/(2*$zcm) * 1rem;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
}

header {
    width: 100%;
    height: r(168);
    position: absolute;
    top: 0;
    a {
        width: r(18);
        height: r(31);
        margin-left: r(28);
        display: inline;
        position: relative;
        top: r(-20);
        color: #000000;
        img{
            width: r(22);
            height: r(38);
        }
    }
    span {
        font-size: r(28);
        margin-left: r(180);
        position: relative;
        top: r(-26);
    }
    .line {
        width: 100%;
        height: r(1);
        border-top: 1px solid #A7A7A7;
        background: #A7A7A7;
        position: relative;
        top: r(-20);
    }
    .searchbar {
        width: r(593);
        height: r(54);
        background: #F2F2F2;
        margin: 0 auto;
        border-radius: r(15);
        position: relative;
        input {
            vertical-align: top;
            width: 100%;
            height: 100%;
            border-radius: r(15);
            border: none;
            background: #f2f2f2;
            text-align: center;
        }
        img {
            width: r(24);
            height: r(25);
            position: absolute;
            top: r(15);
            right: r(26);
        }
    }
}

section {
    width: 100%;
    background: white;
    position: absolute;
    top: r(178);
    bottom: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    article {
        nav {
            position: absolute;
            top: r(0);
            bottom: r(0);
            left: r(0);
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            float: left;
            ul {
                li {
                    a {
                        font-size: r(26);
                        width: r(160);
                        height: r(100);
                        background: #e5e5e5;
                        border: 1px solid #cccccc;
                        text-align: center;
                        line-height: r(100);
                        display: block;
                        color: #000000;
                    }
                    a:active {
                        background: white;
                        border-left: 2px solid #000000;
                    }
                }
            }
        }
        .nav_info {
            width: r(476);         
            position: absolute;
            top: r(0);
            bottom: r(0);
            right: r(0);
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            ul {
                li {
                    
                    .info {
                        
                        margin: 0 auto;
                        width: r(442);
                        height: r(110);
                        .info_left {
                            
                            .info_img {
                                width: r(83);
                                height: r(83);
                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                        .info_right {
                            width: r(350);
                            float: right;
                            border-bottom: 1px solid #b2b2b2;
                            .left {
                                line-height: r(30);
                                h5 {
                                    font-size: r(24);
                                }
                                .titlelogo{
                                    span{
                                        font-size: r(20);
                                    }
                                    a{
                                       &:nth-of-type(1){
                                            img{
                                            width: r(24);
                                            height: r(16);
                                        }
                                       }
                                        &:nth-of-type(2){
                                            img{
                                            width: r(16);
                                            height: r(19);
                                        }
                                       }
                                        &:nth-of-type(3){
                                            img{
                                            width: r(19);
                                            height: r(19);
                                        }
                                       }
                                    }
                                }
                            }
                            .right{
                                width: r(25);
                                height: r(25);
                                line-height: r(50);
                                img{
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}